extends ../../components/layout
append style
  +css('orderBooking/orderBooking.css')
  link(rel='stylesheet', href='../../assets/css/simulate/simulatePage.css')
block title
  title 订单填写
block content
  include ../../components/data/travelData
  .gzl-page
    section.gzl-section.booking-section
      // 订单信息
      .booking-top
        a(href="#")
          h1.booking-tit
            strong  澳大利亚
          .booking-info 澳大利亚签证(个人旅游/ 探亲/ 广州领区)
      // 填写联系人
      - var bkcontact = ['联系人姓','联系人名','手机号码','电子邮箱']
      .booking-contact
        -for(var i=0;i<bkcontact.length;i++)
          .gzl-cell
            .gzl-label #{bkcontact[i]}
            .gzl-cell__bd
              input.gzl-input(placeholder='请输入'+bkcontact[i])
      // 出发日期 和签证人数选择
      .ticket-booking-info
        .gzl-cell.gzl-cell_access
          .gzl-label 使用日期
          .gzl-cell__bd
            .use-date.tr.placeholder
              span(data-target='cur') 请选择
          .gzl-cell__ft 
        .ticket-booking-num.gzl-cell
          .gzl-cell__bd 签证人数
          .gzl-count
            span.gzl-count__minus.disabled(data-min="1")
              +icon('#icon-minus')
            .gzl-count__num 1
            span.gzl-count__plus(data-max="5")
              +icon('#icon-plus')
            // 游客选择
      .tourist-select
        .tourist-select-hd
          .gzl-cell
            strong 游客信息
            em.gzl-cell__tip （点击游客信息可更换对应类型的游客）
        ul.tourist-sel-list
          li(data-type="visitor")
            +icon('#icon-plus')
            | 选择游客
        //- ul.tourist-info-list
      // (可选服务,保险,优惠规则,备注)
      +otherBlock
    footer.gzl-footer
      +footbar

append script
  script(type="text/template", id="tourist-select")
    <% if(type === 'adult'){ %>
    li(data-type!="<%- type %>")
      +icon('#icon-plus')
      | 选择成人
    <% } else if(type === 'child'){ %>
    li(data-type!="<%- type %>")
      +icon('#icon-plus')
      | 选择儿童
    <% } else { %>
    li(data-type!="<%- type %>")
      +icon('#icon-plus')
      | 选择长者
    <% } %>
  script(type="text/template", id="contact-select")
    .gzl-page.contact-select-page
      .gzl-section
        .gzl-cell__title 请选择3名成人
        .contact-add 新增游客
        ul.contact-list
          <% _.each(list, function(e, i){ %>
          li.gzl-flex.contact-item(data-index!="<%- i %>")
            .gzl-flex__item.gzl-flex_acenter
              .contact-check
                <% if (e.checkState !== 'uncheck') {%>
                  <% if (e.checkType === type) {%>
                    +icon("#icon-check")(class="checked")
                  <% } else { %>
                    +icon("#icon-checked")
                  <% } %>
                <% } else { %>
                  +icon("#icon-uncheck")
                <% } %>
              .gzl-flex__item
                span.contact-name <%= e.name %>
                span.contact-tel <%= e.mobile %>
                .contact-code 
                  label <%= e.cardTypeName %>：
                  span <%= e.cardNm %>
                <% if (!e.name || !e.mobile) {%>
                  .contact-tip.font-warn 信息不全，请编辑补充
                <% } %>
            .contact-edit
              +icon
          <% }) %>
      .gzl-footbar
        .gzl-flex__item
          .btn.btn-default.cancel-btn 取消
        .gzl-flex__item
          .btn.confirm-btn 确认
  script(type="text/template", id="tourist-list")
    <% _.each(list, function(e, i){ %>
      ul.tourist-info-list
        li.booking-list-item(class!="<%-type+'-info'%>", data-type!="<%-type%>")
          .booking-list-tip(class!="<%-type%>") <%= typeStr + (i+1) %>
          ul.booking-list-bd
            li(data-index!="<%-e.index%>",data-type!="<%-type%>")
              .gzl-cell
                +icon('#icon-tourist')
                span.tourist-name <%= e.name %>
                span.tourist-tel <%= e.mobile %>
                span.tourist-id <%= e.cardNm %>
              .gzl-cell
                .gzl-cell__bd
                  +icon('#icon-type')
                  | 公职人员
    <% }) %>
  script(type="text/template", id="contact-edit")
    .gzl-page.contact-edit-page
      .gzl-section
        .gzl-cell__title 基本信息
        .gzl-cell
          .gzl-label 中文姓
            span.required *
          .gzl-cell__bd
            input.gzl-input(placeholder='请与证件保持一致')
        .gzl-cell
          .gzl-label 中文名
            span.required *
          .gzl-cell__bd
            input.gzl-input(placeholder='请与证件保持一致')
        .gzl-cell
          .gzl-label 英文姓
          .gzl-cell__bd
            input.gzl-input(placeholder='请与证件上姓一致')
        .gzl-cell
          .gzl-label 英文名
          .gzl-cell__bd
            input.gzl-input(placeholder='请与证件上姓一致')
        .gzl-cell
          .gzl-label 手机号码
            span.required *
          .gzl-cell__bd
            input.gzl-input(placeholder='请输入手机号码')
        .gzl-cell
          .gzl-label 电子邮箱
          .gzl-cell__bd
            input.gzl-input(placeholder='请输入邮箱(选填)')
        .gzl-cell__title 证件信息
        .gzl-cell
          .gzl-label 身份证
            +icon("#icon-arrow-right")
          .gzl-cell__bd
            .gzl-select.placeholder 请输入证件号码(必填)
        .gzl-cell.gzl-cell_access
          .gzl-label 证件有效期
          .gzl-cell__bd
            .gzl-select.placeholder 请选择有效期
          .gzl-cell__ft
        .gzl-cell__title 其他信息
        .gzl-cell
          .gzl-label 生日
          .gzl-cell__bd
            input.gzl-input(placeholder='请选择出生日期')
        .gzl-cell
          .gzl-label 性别
          .gzl-cell__bd
            input.gzl-input(placeholder='请选择出生日期')
      .gzl-footbar
        .gzl-flex__item
          .btn.confirm-btn 保存
  script(type="text/template", id="footbar-popup")
    .order-price-detail
      ul.price-list
        <% _.each(list, function(e, i){ %>
        li
          .price-list-bd.gzl-flex
            .gzl-flex__item <%= e.con %>
            span.price-item
              em.font-warn ￥<%= e.price %>
              | ×<%= e.num %>
        <% }) %>
      strong.tit-item 优惠信息
      ul.other-list
        <% _.each(discounts, function(e, i){ %>
        li.gzl-flex
          .gzl-flex__item <%= e.con %>
          .price-item
            em.font-warn -￥<%= e.price %>
        <% }) %>
    //- 积分使用模拟页
  //- 积分使用
  script(type="text/template", id="integralUsePage")
    .integralUseBox
      .integralContent
        h1 我的积分
        div 5800
        p 本次可用积分
          |
          span 2800
      .integralUse
        .gzl-flex
          .gzl-flex__item
            input(type='number' placeholder='输入使用积分')
          span 全部使用
        .usingTips 400积分抵扣1元，每次使用为400的整数
        .commitUse
          .btn 确定
  //- 优惠券
  script(type="text/template", id="more-coupon")
      ul.coupon-list
        <% _.each(obj, function(e, i){ %>
        li.coupon-list-item
          .gzl-flex.coupon-item-hd
            .gzl-flex__item 双12全球好购节
            .contact-check
              +icon('#icon-uncheck')
          .coupon-item-bd
            .coupon-discount ￥
              span 5000
              em 满2000可用
            .coupon-date 2016/08/31-2017/01/01
            .show-detail 详情
          ul.coupon-item-dt
            li.gzl-flex
              label 优惠券号：
              .gzl-flex__item HDG87892115HN
            li.gzl-flex
              label 适用范围：
              .gzl-flex__item 适用于易起行散客、邮轮产品，仅适用于部分产品，可用产品请以产品为准。
            li.gzl-flex
              label 有效期限：
              .gzl-flex__item 2018/07/01 00:00-2019/07/01 24:00
            li.gzl-flex
              label 使用范围：
              .gzl-flex__item 订单金额满1000元方可使用；
        <% }) %>
  //- 促销
  script(type="text/template", id="promotionPopUp")
    ul.promotionList
      <% _.each(obj,function(e,i){ %>
        li.promotionWay
          .title <%= e.title %>
          ul
            <% _.each(e.promotionSelectItem,function(el,index){ %>
              li.promitionSelectItem
                .gzl-cell
                  .contact-check
                    <% if(el.defaultChecked){ %>
                      +icon('#icon-checked')
                    <% } else { %>
                      +icon('#icon-uncheck')
                    <% } %>
                  .gzl-cell__bd
                    span <%= el.rulesName %>
                    em.showRulesDetail 活动规则
                  .gzl-cell__ft -￥<%= el.moneyReduce %>
                .rulesDetail
                  p <%= el.rulesDescription %>
            <% }) %>
      <% }) %>
  script(type="text/template", id="service-select")
    .gzl-page.service-select-page
      .gzl-section
        ul.service-list
          li.service-item.must-select
            .service-select-tips
              span.tips-t1 3选1
              span.tips-t2 （单选，必须选1项）
            .must-select-box(data-min="0", data-max="5")
              <% _.each(mustSelectList, function(e, i) { %>
              .gzl-cell
                .gzl-cell__bd
                  p.service-name <%= e.serviceName %>
                  p.service-price ￥<%= e.servicePrice %>
                .gzl-count
                  span.gzl-count__minus.disabled
                    +icon('#icon-minus')
                  .gzl-count__num <%= e.serviceCount %>
                  span.gzl-count__plus
                    +icon('#icon-plus')
              <% }) %>
          li.service-item.monomial-select
            <% _.each(monomialSelectList, function(e, i) { %>
            .gzl-cell.cardType(data-min="0", data-max="5")
              .gzl-cell__bd
                p.service-name <%= e.serviceName %>
                p.service-price ￥<%= e.servicePrice %>
              .gzl-count
                span.gzl-count__minus.disabled
                  +icon('#icon-minus')
                .gzl-count__num <%= e.serviceCount %>
                span.gzl-count__plus
                  +icon('#icon-plus')
            <% }) %>
          li.service-item.per-room-per-day
            .gzl-cell
              .gzl-cell__bd
                p.service-name 早餐
                p.service-price ￥8999
              .service-select-ri
                .service-select-count
                .service-select-btn 选择
          li.service-item.per-room
            .gzl-cell
              .gzl-cell__bd
                p.service-name 迪士尼门票
                p.service-price ￥8999
              .service-select-ri
                .service-select-count
                .service-select-btn 选择
          li.service-item.service-group
            .gzl-cell
              .gzl-cell__bd
                p.service-name 房间主题装饰
                p.service-price ￥8999
              .service-select-ri
                .service-select-count 已选20份
                .service-select-btn 修改
      footer.gzl-footer
        .gzl-footbar
          .gzl-flex__item
            .btn.confirm-btn 确认
  script(type="text/template", id="per-room-per-day")
    ul.per-room-list
      <% _.each(perRoomPerDayList, function(e, i){ %>
      li.per-room-item
        .room-count.gzl-cell
          .gzl-cell__bd <%= e.roomNumber %>
          .gzl-count
            .gzl-count__minus.disabled(data-min!="0")
              +icon("#icon-minus")
            .gzl-count__num 0
            .gzl-count__plus
              +icon("#icon-plus")
        ul.room-inner-list
          <% _.each(e.roomInfo, function(el,index) { %>
          li.room-inner-item.gzl-cell
            .gzl-cell__bd <%= el.date %>
            .gzl-cell__bd.prc ￥<%= el.price %>
            .gzl-cell__bd.count <%= el.count %>份
          <% }) %>
      <% }) %>
  script(type="text/template", id="per-room")
    .room-count.change-text.gzl-cell
      .gzl-cell__bd 快速选择每房份数
      .gzl-count
        .gzl-count__minus.disabled(data-min!="0")
          +icon("#icon-minus")
        .gzl-count__num 0
        .gzl-count__plus
          +icon("#icon-plus")
    ul.room-outer-list
      <% _.each(perRoomList, function(e, i) { %>
      li.room-outer-item.gzl-cell
        .gzl-cell__bd <%= e.roomNumber %>
        .gzl-cell__bd.prc ￥<%= e.roomPrice %>
        .gzl-count
          .gzl-count__minus.disabled(data-min!="0")
            +icon("#icon-minus")
          .gzl-count__num <%= e.roomCount %>
          .gzl-count__plus
            +icon("#icon-plus")
      <% }) %>
  script(type="text/template", id="service-group")
    ul.service-group-list
      li.service-group-item
        .gzl-cell
          .gzl-cell__bd 房间1
          .gzl-cell__bd.sel 海贼王主题海贼王主题海贼王主题海贼王主
        ul.select-list
          li.select-item
            p 海贼王主题海贼王主题海贼王主题海贼王主题…
            span |
            span.prc ￥200
  script(type="text/template", id="service-selected")
    .service-selected-list
      .service-selected-item.must-sel-item.gzl-cell
        .gzl-cell__bd
          p 乐游亚洲
        .gzl-cell__bd.ri
          span.s-price ￥899
          span.s-count ×20份
      .service-selected-item.monomial-sel-item
        .monomial-sel-inner.gzl-cell
          .gzl-cell__bd
            p 乐游亚洲
          .gzl-cell__bd.ri
            span.s-price ￥899
            span.s-count ×20份
      .service-selected-item.perRD-sel-item.gzl-cell
        .gzl-cell__bd
          p.inner 早餐
          em 明细
        .gzl-cell__bd.ri
          span.s-price ￥899
          span.s-count ×4份
      .service-selected-item.perR-sel-item.gzl-cell
        .gzl-cell__bd
          p.inner 迪士尼门票
          em 明细
        .gzl-cell__bd.ri
          span.s-price ￥899
          span.s-count ×4份
      .service-selected-item.serviceGroup-sel-item.gzl-cell
        .gzl-cell__bd
          p.inner 房间装饰主题展示所有已选的服务数…
          em 明细
        .gzl-cell__bd.ri
          span.s-price ￥899
          span.s-count ×4份
  script(type="text/template", id="perRD-sel-detail")
    ul.per-room-list
      li.per-room-item
        .room-count.gzl-cell
          .gzl-cell__bd 房间1
        ul.room-inner-list
          li.room-inner-item.gzl-cell
            .gzl-cell__bd 12月20日
            .gzl-cell__bd.prc ￥200
            .gzl-cell__bd.count 2份
  script(type="text/template", id="perR-sel-detail")
    ul.room-outer-list
      li.room-outer-item.change.gzl-cell
        .gzl-cell__bd 房间1
        .gzl-cell__bd.prc ￥200
        .gzl-cell__bd.count 2份
      li.room-outer-item.change.gzl-cell
        .gzl-cell__bd 房间2
        .gzl-cell__bd.prc ￥200
        .gzl-cell__bd.count 2份
  script(type="text/template", id="serviceGroup-sel-detail")
    ul.serviceGroup-outer-list
      li.serviceGroup-outer-item.gzl-cell
        .gzl-cell__bd 房间1
        .gzl-cell__bd.mi
          p 海贼王主题海贼王主题海贼王主题
        .gzl-cell__bd.prc ￥200
      li.serviceGroup-outer-item.gzl-cell
        .gzl-cell__bd 房间2
        .gzl-cell__bd.mi
          p 海贼王主题海贼王主题海贼王主题
        .gzl-cell__bd.prc ￥200
  +js("simulatePage/seriesPopUp.js")
  +js("simulatePage/simulatePage.js")
  +js('orderBooking/visaOrderBooking.js')

